<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>

  <script>

    /* const p = new Promise((resolve, reject) => { // 执行器同步执行的
       setTimeout(() => {
         // 发请求去
         axios.get()  // 2S
          // 请求成功后
          resolve(response)
       }, 0);
    })

    p.then(response => {

    })

    setTimeout(() => {
      p.then(response => {

      })
    }, 2100); */
    // 指定回调
    // 想先指定回调, 后发请求?   在定时器中发请求
    // 想在请求结束后,再指定回调?  在定时器中调用then
    

    /* 
    - then()总是返回一个新的promise
    - 新promise的结果状态由then指定的回调函数执行的结果决定
      - 抛出错误
      - 返回失败的promise
      - 返回成功的promise
      - 返回其它任何值
      - 返回pending的promise

      在then指定的回调函数没有执行前, then方法就已经返回了一个pending状态的promise
    */
   /*  new Promise((resolve, reject) => {
      // resolve(1)
      reject(2)
    }).then(
      value => {
        console.log('onResolved1', value)
      },
      reason => {
        console.log('onRejected1', reason)
        // - 抛出错误  => 失败, reason是抛出的错误
        // throw 3

        // - 返回失败的promise => 失败, reason是返回的promise的reason
        // return Promise.reject(4)

        // - 返回成功的promise  => 成功, value是返回的promise的value
        // return Promise.resolve(5)

        // - 返回其它任何值 => 成功, value是返回值
        // return undefined
        // return 6

        // - 返回pending的promise => 还是默认的pending
        // return new Promise(() => {})

        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(8)
          }, 2000);
        })
      }
    ).then(
      value => {
        console.log('onResolved2', value)
      },
      reason => {
        console.log('onRejected2', reason)
      }
    ) */


    /* 
    Promise.all()
    */
    /* function ajax(url) {
      return axios.get(url)
    }
    const p1 = ajax(url1)
    const p2 = ajax(url2)
    const p3 = ajax(url3)
    Promise.all([p1, p2, p3])
      .then(
        responses => { // 得到包含3个成功数据的response的数组
          return ajax(url4)
          // return undefined
        }
      ).then(response4 => {  // 第4个请求成功的回调

      }).catch(error => { // 只要有一个失败了

      }) */

    /* 
    1. 哪里用await: 一般在结果为promise的表达式左侧
        如果await 右侧表达式结果不是promise, 直接得到这个结果
    2. 哪里用async: 离await最近的函数定义的左侧

    成功的value: await左侧以级下面的代码都是在成功之后执行(相当于在成功的回调中执行)
    失败的reason: 使用try...catch中在失败后执行(相当于在失败的回调中执行)

    调用async函数的得到是一个promise对象, promise的结果由aysnc函数体执行的结果决定(与.then类似)

     */

    /* 
    async函数执行返回一个promise
    promse的状态由 async函数体执行的结果 决定    ==> 与then返回的promise类似
    await下面的代码是在成功的回调中执行
    catch下的代码是在失败的回调中执行

    async函数返回的promise的结果状态由什么决定?  由async函数体执行的结果决定

    */
    const getProduct =  async () => {
      try {
        const url = '/1_js基础/product.json'
        const response = await axios.get(url)
        const result = response.data
        console.log(result)
        return result
        // return Promise.resolve(result)
      } catch (error) {
        console.log(error.message)
        // throw error
        return Promise.reject(error)
      }
      
    }

    const getProduct2 = () => {
      const url = '/1_js基础/product.json'
      return axios.get(url).then(
        response => {
          const result = response.data
          console.log(result)
          return result
        },
        error => {
          console.log(error.message)
          return Promise.reject(error)
        }
      )
    }


   
    async function test() {
      const result = await getProduct()  // await只能等待成功的结果, 失败的情况用try...catch处理
      console.log(result)
      const result2 = await 3   // 如果不是promise, 直接就是右边表达式的值

    }

    test()


    // Promise.resolve(2)
    // .catch(reason => {
    //   console.log(reason)
    // }).then(value => {

    // })
    // // 本质
    // .then(
    //   value => value, 
    //   reason => {
    //     console.log(reason)
    //   }
    // )
    
  </script>
</body>
</html>